<template>
  <div class="app-container">
    <el-form ref="form" :model="project" label-width="100px" label-suffix="：">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基础信息设置" name="first">
          <el-form-item label="属性数量" prop="show_attr_number">
            <el-input-number v-model="project.show_attr_number" style="width:160px;" :min="1" :max="6" controls-position="right" placeholder="显示数量" />
            <span class="info"><i class="el-icon-info" />设备列表显示中的显示属性个数</span>
          </el-form-item>
          <el-form-item label="显示地块" prop="attr_show_number">
            <el-radio-group v-model="project.show_field" style="width:160px;">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <span class="info"><i class="el-icon-info" />控制台地图中默认是否显示地块</span>
          </el-form-item>
          <el-form-item label="显示设备" prop="attr_show_number">
            <el-radio-group v-model="project.show_device" style="width:160px;">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <span class="info"><i class="el-icon-info" />控制台地图中默认是否显示设备</span>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="设备故障提醒设置" name="second">
          <el-form-item label="是否提醒" prop="attr_show_number">
            <el-radio-group v-model="project.show_message" style="width:160px;">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
            <span class="info"><i class="el-icon-info" />进入控制台的时候是否提醒长时间掉线设备</span>
          </el-form-item>
          <el-form-item label="故障判定" prop="attr_show_number">
            <el-input v-model="project.timetran" type="number" style="width:240px;" placeholder="故障判定时间">
              <template slot="append">小时</template>
            </el-input>
            <span class="info"><i class="el-icon-info" />超过多久时间判定为掉线或故障</span>
          </el-form-item>
          <el-form-item label="提醒消息" prop="attr_show_number">
            <el-input v-model="project.message" type="textarea" :rows="2" />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="水价设置" name="third">
          <el-form-item label="灌溉水价" prop="attr_show_number">
            <el-input v-model="project.wprice" type="number" style="width:240px;" placeholder="灌溉水价">
              <template slot="append">元 / m³</template>
            </el-input>
            <span class="info"><i class="el-icon-info" />若项目用水不需要系统缴费则设置为0</span>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
      <el-button type="primary" style="margin-left:16px;" @click="submit">提交</el-button>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateOne } from '@/api/project'
export default {
  data() {
    return {
      activeName: 'first'
    }
  },
  computed: {
    ...mapGetters(['project'])
  },
  methods: {
    async submit() {
      const { data, msg } = await updateOne(this.project.id, this.project)
      this.$message.success(msg)
      this.$store.commit('device/SET_PROJECT', data)
    }
  }
}
</script>

<style lang="scss" scoped>
.info{
  padding-left:12px;
  color:#999;
  i{
    color:#666;
    font-size:16px;
    padding-right:4px;
  }
}
</style>
